import { ref } from 'vue'
import { getTopCategoryAPI } from '@/api/category'

// 解决路由复用数据不重新获取的问题 导入函数
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

// 路由缓存  id变了 内容还没有重新获取
// 解决思路 ： 1、不走缓存  2、让id，每次变化的时候loadCategory重新执行
// 解决方法：1、router-view 加一个独一不二的key   2、onBeforeRouterUpdate

export function useCategory () {
  // 获取所有一级类目
  const allCategoryData = ref({})
  // 拿到路由对象route
  const route = useRoute()
  async function loadCategoryFn (id = route.params.id) {
  // 拿到当前路由路径上传的参数
    const res = await getTopCategoryAPI(id)
    console.log(res)
    allCategoryData.value = res.result
  }
  // loadCategoryFn()
  // 路由跳转之后更新之前自动执行
  onBeforeRouteUpdate((to) => {
    // to指代的是目标路由对象 to拿到最新的路由参数id
    // 使用最新id获取数据
    loadCategoryFn(to.params.id)
  })

  return { allCategoryData }
}
